<template>
	<view>
		
		<!-- 格子广告 -->
		<view class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="back" @click="back()">
			<view class="backzhezhao"></view>
			<image src="../../static/images/back3.png"></image>
		</view>
		<view class="top">
			<view class="image-container w100">
				<image mode="aspectFill" :src="list[1].url"></image>
			</view>
		</view>
		<view class="top2" style="width: 100%;height: 74px;"></view>
		
		<view style="position: fixed;top: 74px;z-index: 9999;" class="w100" v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white" v-if="show_ad"></ad>
		</view>
		<view :class="show_ad?'mt580':''" class="text-box ml20 mr20 prel">
			<view class="name">{{name}}</view>
			<view class="desc mt10">{{desc}}</view>
		</view>
		
		<view class="w100 flex flex_wrap flex_jc">
			<view class="w710">
				<view class="imglist mt20 flex">
					<view class="li1">
						<view :class="item.id" class="li prel" v-for="(item,index) in list1" @click="goTheme(item.id)">
							<image mode="widthFix" :src="item.small_url"></image>
							<view class="w100 pab" style="bottom: 20rpx;">
								<view class="opbg"></view>
								<view class="prel text txt_c">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="li2 ml20">
						<view :class="item.id" class="li prel" v-for="(item,index) in list2" @click="goTheme(item.id)">
							<image mode="widthFix" :src="item.small_url"></image>
							<view class="w100 pab" style="bottom: 20rpx;">
								<view class="opbg"></view>
								<view class="prel text txt_c">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tips">{{tips}}</view>
			</view>
		</view>

	</view>
	
</template>

<script>
	import adSdk from "@/utils/advertise.js"	
	import {getImageHeight} from "@/utils/common"
	import {getZThemeList} from "@/api/api"
    export default {
        data() {
            return {
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				name:'',
				desc:'',
				list:[],
				list1:[],
				list2:[],
				list1height:0,
				list2height:0,
				page:1,
				theme_id:0,
				count:0,
				tips:'分类加载中',
				bili:0,
				windowWidth:0,
				windowHeight:0,
				windowbili:0,
				imglistliheight:711,
				_windowWidth:getApp().globalData._windowWidth,
				_windowHeight:getApp().globalData._windowHeight,
			}
        },
		
		
		onShow:function(){
			adSdk.initInterstitial(this.xcx_ad.interstitialId)
			adSdk.showInterstitial()
		},
		
		onLoad: function (option) {
			
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.windowHeight = res.windowHeight
					that.windowWidth = res.windowWidth
					that.windowbili = res.windowWidth/res.windowHeight
					that.bili = res.windowWidth/750;
					if(that.windowbili<1){
						that.imglistliheight = 345/that.windowbili
						console.log(that.imglistliheight)
					}
				}
			})
			
			
			that.getZThemeList()
		},
		onShareAppMessage(e) {
			return {
				path: '/pages/themelist/index',
			}
		},
		
		
		onShareTimeline(e) {
			return {
				path: '/pages/themelist/index',
			}
		},
		
		onReachBottom(){
		  if(this.count<=this.list.length){
			  this.tips = '亲，我是有底线的呢~'
		  }else{
			  this.page += 1
			  this.getZThemeList()
		  }
		},
		
		 methods: {
			 
			goTheme(id){
				uni.navigateTo({
					url: '/pages/theme/index?id='+id,
				}); 
			}, 
			 
			back(){
				const pages = getCurrentPages();
				console.log(pages.length)
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			}, 
			 
			getZThemeList(){
				var that = this
				getZThemeList(that.page).then(res=>{
					if(res.code==0){
						that.name = res.data.name
						that.desc = res.data.desc
						for(var i = 0; i<res.data.data.length;i++){
							//先计算高度
							var height = res.data.data[i].width/res.data.data[i].w_h_bi
							that.list.push(res.data.data[i])
							res.data.data[i].index2 = that.list.length-1
							if(that.list1height==that.list2height){
								that.list1height = that.list1height + height
								that.list1.push(res.data.data[i])
								
							}else if(that.list1height>that.list2height){
								
								that.list2height = that.list2height + height
								that.list2.push(res.data.data[i])
							}else{
								
								that.list1height = that.list1height + height
								that.list1.push(res.data.data[i])
							}
						}
						that.count = res.data.total
						if(that.count>that.list.length){
							 that.tips = '分类加载中'
						}else{
							that.tips = '亲，我是有底线的呢~'
						}
						
				
					}else{
						//网络连接出错
					}
					console.log(res)
				})
			},
		
		  }
    }
</script>
<style>
	
</style>
<style lang="scss">
	.prel{position: relative;}
	.pab{position: absolute;}
	.li .text{color: #FFFFFF;}
	.opbg{width: 100%;height: 100%;background: #000000;opacity: .5;position: absolute;}
	.tips{margin: 20rpx 0;font-size: 25rpx;color: #999999;text-align: center}
	.backzhezhao{width: 100%;height: 100%;border-radius: 100%;background-color: #000000;
		opacity: .5;position: absolute;top: 0;}
	.back{width: 60rpx;height: 60rpx;position: fixed;top: 38px;left: 24px;z-index: 99999;}
	.back image{width: 100%;height: 100%;z-index: 3;position: relative;}
	.text-box .desc{font-size: 25rpx;color: #9e9e9e;}
	.text-box .name{font-size: 35rpx;font-weight: bold;}
	.image-container {
	  position: relative;
	  display: inline-block;
	  height: 400rpx;
	}
	 
	.image-container image {
	  display: block;
	  width: 100%;
	  height: 400rpx;
	}
	 
	.image-container::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 100rpx; /* 模糊区域的高度 */
	  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
	  pointer-events: none; /* 防止伪元素影响鼠标事件 */
	}
	
	.top{overflow: hidden;height: 74px;position: fixed;top: 0;width: 100%;z-index: 9999;}
	.imglist .li1,.imglist .li2{width: 345rpx;}
	.imglist .li{width: 345rpx;overflow: hidden;margin-bottom: 10rpx;}
	.imglist .li image{width: 100%!important;border-radius: 20rpx;}
	.imglist{display: flex;}

</style>